import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { BulbOutlined, PictureOutlined, CalendarOutlined } from '@ant-design/icons';
import { BrowserRouter as Router, Route, Link, Routes, Navigate } from 'react-router-dom';
import ContentGenerator from './components/ContentGenerator';
import ImageGenerator from './components/ImageGenerator';
import SchedulePlanner from './components/SchedulePlanner';

const { Header, Content, Sider } = Layout;

function App() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={{ background: '#fff', padding: '0 20px' }}>
          <div style={{ 
            float: 'left', 
            marginRight: '20px',
            fontSize: '20px',
            fontWeight: 'bold' 
          }}>
            智能文案生成系统
          </div>
        </Header>
        <Layout>
          <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              <Menu.Item key="1" icon={<BulbOutlined />}>
                <Link to="/generate">文案生成</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<PictureOutlined />}>
                <Link to="/images">配图生成</Link>
              </Menu.Item>
              <Menu.Item key="3" icon={<CalendarOutlined />}>
                <Link to="/schedule">发布计划</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Content style={{ margin: '16px' }}>
              <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                <Routes>
                  <Route path="/generate" element={<ContentGenerator />} />
                  <Route path="/images" element={<ImageGenerator />} />
                  <Route path="/schedule" element={<SchedulePlanner />} />
                  <Route path="/" element={<Navigate to="/generate" replace />} />
                </Routes>
              </div>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </Router>
  );
}

export default App;